<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale= 1">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            /* background-color: red; */
        
        }

        @media screen and (max-width:776px) {
            .box{
                width: 300px;
            height: 300px;
             background-color: antiquewhite;
        
            }
        }
        @media screen and (min-width:776px) and (max-width:1000px){
            .box{
                width: 300px;
            height: 300px;
             background-color: gold;
        
            }
        }

        @media screen and (min-width:1000px) {
            .box{
                width: 300px;
            height: 300px;
             background-color: green;
        
            }
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <h3>媒体查询</h3>
    <p>媒体查询能 让页面在不同设备上显示不一样的效果</p>
    <p>媒体查询根据不同终端 设置不同的样式效果</p>

    <h3>设置meta标签</h3>

    <p>这里我设置max-width：1000 时没有加单位px 导致不显示，记录一下 勿忘！</p>
    <div class="box"></div>
</body>
</html>